import React from 'react';
import ClassNames from 'classnames';
import Image from '@/components/Image';
import { empty } from '@/common/utils';
import DefaultUserImage from '@/assets/images/default_user_image.png';

import styles from '../style/Tabs.scss';

const Tabs = ({ userImage, fans, onItemClick }) => (
  <div className={styles.container}>
    <div className={ClassNames(styles.item, styles.isActive)} onClick={onItemClick}>聊天</div>
    <div className={styles.item} onClick={onItemClick}>主播</div>
    <div className={styles.attention}>
      <Image className={styles.userImage} src={userImage} defaultImage={DefaultUserImage} />
      <div className={styles.attentionCtx} onClick={onItemClick}>
        <div className={styles.attentionLabel}>关注TA</div>
        <div className={styles.attentionValue}>{fans}</div>
      </div>
    </div>
  </div>
);

Tabs.defaultProps = {
  fans: 0,
  onItemClick: empty,
};

export default Tabs;
